<template>
	<m-layout2 class="layout-box flex-column" title="发票管理" gap="24">
		<view slot="right"><text  @click="Jump('/pages/mine/myInvoice/invoicingRecords/invoicingRecords')">开票记录</text></view>
		<m-block v-if="list.length>0" bg-color="unset">
			<m-block class="flex-column" v-for="item in list" spa="0 0 16" gap="24" radius="8">
				<view class="flex-column listUl fs26 pb-12">
					<view class="li flex-between ptb-16">
						<text class=" text-dark-light">开票名称</text>
						<text class="text-black">{{item.iname}}</text>
					</view>
					<view class="li flex-between ptb-16 border-bottom pb-24">
						<text class=" text-dark-light">税号</text>
						<text class="text-black">{{item.icode}}</text>
					</view>
				</view>
				<view class="funList flex jc-flex-end fs22 mt-12 ">
					<!-- <view class="flex" @click="clearOneFn(item)">
						<m-icon size="36" color="#C0C0C0" type="icon-shanchu"></m-icon>
						<text class="ml-12">删除</text>
					</view> -->
					<view class="ml-48 flex" @click="editFn(item)">
						<m-icon size="36" color="#FFD100 " type="icon-bianji"></m-icon>
						<text class="ml-12 text-primary">编辑</text>
					</view>
				</view>
			</m-block>
		</m-block>
		<m-empty :list="list" icon="address_empty"></m-empty>
		<!-- 缺省页 -->
		<m-block class="footer" slot="footer" gap="24">
			<m-button @click="addOneFn()">
				新增开票信息
			</m-button>
		</m-block>

		<!-- 新增发票弹框 -->
		<m-dialog class="addBox" :title="form.icode?'编辑发票':'新增发票'" :loading="btnLoading" :showCancel="true"
			:isShow="addShow" @handleCancel="addShow = false;btnLoading = false;
			" @handleConfirm="addInvoiceFn">
			<view class="setName-box flex-column">
				<text class="fs26 fw-600">开票名称</text>
				<view class="form-Item mt-24"><input type="text" v-model="form.iname" placeholder="请输入开票名称" /></view>
			</view>
			<view class="setName-box flex-column">
				<text class="fs26 fw-600">税号(选填)</text>
				<view class="form-Item mt-24"><input type="text" v-model="form.icode" placeholder="请输入税号" /></view>
			</view>
		</m-dialog>
		<!-- 删除 -->
		<m-dialog class="addBox" title="提示" :loading="btnLoading" :showCancel="true" :isShow="clearShow" @handleCancel="clearShow = false;btnLoading = false;
			" @handleConfirm="clearFn">
			<view class="ta-center ptb-48">
				您确定要删除吗？
			</view>
		</m-dialog>
	</m-layout2>
</template>

<script>
	import { invs, inva, inve } from "@/api/Order.js"
	import store from '@/store'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				clearItem: {},
				clearShow: false,
				form: {
					id: 0,
					iname: '',
					icode: ''
				},
				btnLoading: false,
				addShow: false,
				list: [],
				isLoading: false,
				isSelect: false, // 是否选择地址
				isChange: false, // 是否选择地址
				isSet: false, // 合伙人是否设置地址

			};
		},
		computed: {
			...mapState({

			})
		},
		onLoad({ isSelect, isChange, isSet }) {
			// this.isSet = isSet || false;
			// if (isSelect) this.isSelect = isSelect;
			// this.isChange = isChange || false;
		},
		onShow() {
			this.GetMyInvsFn();
		},
		methods: {
			clearOneFn(item) {
				this.clearItem = { ...item }
				this.clearShow=true;
			},
			addOneFn() {
				this.form = {
					id: 0,
					iname: '',
					icode: ''
				}
				this.addShow = true;
			},
			editFn(item) {
				this.form = { ...item }
				this.addShow = true;
			},
			async GetMyInvsFn() {
				this.isLoading = true;
				const { success, data, msg } = await invs()
				this.isLoading = false;
				this.list = data
			},
			// 新增发票信息
			async addInvoiceFn() {
				if (!this.form.iname) return this.Toast('请输入开票名称');
				// if (!this.form.icode) return this.Toast('请输入税号');
				this.btnLoading = true;
				const { success, msg } = await inve({
					...this.form
				});
				this.Toast(msg)
				if (!success) return
				await this.GetMyInvsFn()
				this.btnLoading = false;
				this.addShow = false;
			},
			async clearFn(){
				// const { success, msg } = await inve({
				// 	...this.form
				// });
			}
		}
	}
</script>

<style lang="scss">
	.layout-box {
		box-sizing: border-box;
		position: relative;

		::v-deep .body {
			padding-bottom: 160rpx !important;
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
		}
	}

	.block_item {
		padding: 23rpx 24rpx;
		border-bottom: 1rpx solid #F5F5F5;

		.h1 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.h2 {
			padding: 10rpx 0;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.h3 {
			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.phone {
				padding: 0 15rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.uni-tag+.uni-tag {
				margin-left: 10rpx;
			}

		}
	}

	.setName-box {
		padding: 24rpx 0rpx;

		.form-Item {
			background: #fff;
			border-radius: 15rpx;
			box-sizing: border-box;

			input {
				border-radius: 15rpx;
				padding: 20rpx 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #111;
				background: #f6f6f6;
			}
		}

		.hint {
			padding: 24rpx 0 0;
			font-size: 24rpx;
			color: var(--text_1);
		}
	}

	.addBox {
		::v-deep .uni-popup__wrapper {
			width: 100%;
			display: flex;
			justify-content: center;

			.my-modal {
				width: 90%;
			}
		}

		::v-deep .body {
			padding-bottom: 20rpx !important;
		}
	}
</style>